<template>
<div class="header"></div>
<p class="title">待办事项</p>
<input type="text" placeholder="请输入任务" class="new-todo" 
v-model="name" @keyup.enter="enterName">

</template>

<script setup>
import { ref } from 'vue';

const emit=defineEmits(["addToDo"]);
const name=ref("")
function enterName() {
  
    if(name.value === ""){
alert("输入内容不能为空，请输入具体内容")
    }else
    emit('addToDo',name.value);
    name.value="";
}
</script>

<style scoped>
.header{
    box-shadow: 0px 2px 4px 0px #ddd;
}
.title{
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: red;
}
.new-todo{
    width: 100%;
    height: 25px;
    box-shadow: inset 0px 2px 1px #ddd;
    padding: 6px 18px;
    font-size: 30px;
    
}
</style>